<template>
  <div class="DiviceList">
    <u-swipe-action>
      <div class="itemBox" v-for="(item, i) in List" :key="item.imei">
        <u-swipe-action-item
          :key="item.imei"
          :options="actionOptions"
          :threshold="60"
          :name="i"
          @click="btnEvent">
          <div class="item" @click="toLink(item, i)">
            <div class="left">
              <!-- <u--image errorIcon='@/static/yibiao.png' width="45" height="65" class="icon"
								:src="item.url"></u--image> -->
              <img class="icon" src="@/static/yibiao.png" />
            </div>
            <div class="right">
              <div class="name">
                <span class="name_title">
                  {{ item.name }}
                </span>
                <span v-if="item.lineType == 2" class="statusOnline"
                  >状态:在线</span
                >
                <span v-else class="statusOffline">状态:离线</span>
              </div>
              <div class="IMEI">
                <span>IMEI：{{ item.imei }}</span>
              </div>
              <div class="battery">
                <BatteryBox :number="item.power" />
              </div>
            </div>
          </div>
        </u-swipe-action-item>
      </div>
    </u-swipe-action>

    <div class="item" @click="scancode">
      <div class="appendEquipment">
        <img class="icon" src="@/static/append.png" />
        <span class="text">添加设备</span>
      </div>
    </div>

    <u-modal
      @close="popupShowEquipment = false"
      @cancel="popupShowEquipment = false"
      :show="popupShowEquipment"
      :closeOnClickOverlay="true"
      :showCancelButton="true"
      @confirm="confirmEquipment">
      <template #default>
        <div class="modalBox">
          <div class="title">解绑设备</div>
          <div class="popupContent">确定解绑设备？</div>
        </div>
      </template>
    </u-modal>

    <u-modal
      @close="popupShow = false"
      @cancel="popupShow = false"
      :show="popupShow"
      :closeOnClickOverlay="true"
      :showCancelButton="true"
      @confirm="confirmPopupShow">
      <template #default>
        <div class="modalBox">
          <div class="title">修改名称</div>
          <div class="popupContent">
            设备名称:
            <input
              class="changeName"
              placeholder="请修改设备名字"
              v-model="currentEquipment.name" />
          </div>
        </div>
      </template>
    </u-modal>
    <u-modal
      @close="show = false"
      @cancel="show = false"
      :show="show"
      :closeOnClickOverlay="true"
      :showCancelButton="true"
      @confirm="modalComfirm">
      <template #default>
        <div class="modalBox">
          <div class="title">是否绑定该设备</div>
          <div>IMEI：{{ imei }}</div>
          <div>SECRET：{{ secret }}</div>
        </div>
      </template>
    </u-modal>
  </div>
</template>

<script>
import {
  getList,
  appDeviceBind,
  unbind,
  modifyDeviceName,
} from "@/api/device.js";
import BatteryBox from "../../../components/BatteryBox.vue";
import { mapState } from "vuex";
export default {
  components: {
    BatteryBox,
  },
  computed: {
    ...mapState(["$userInfo", "$token"]),
  },
  data() {
    return {
      popupShowEquipment: false, // 解绑 弹窗设置
      popupShow: false,
      currentEquipment: {}, // 当前编辑的设备
      List: [],
      show: false,
      imei: "",
      secret: "",
      actionOptions: [
        {
          text: "修改名称",
          style: {
            backgroundColor: "#1091ff",
            width: "45px",
          },
        },
        {
          text: "解绑",
          style: {
            backgroundColor: "#cc463d",
          },
        },
      ],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async modalComfirm() {
      try {
        this.show = false;
        let account = this.$userInfo.account;
        let r = await appDeviceBind({
          account: account,
          imei: this.imei,
          secret: this.secret,
        });
        this.getList();
      } catch (e) {
        this.show = false;
      }
    },

    confirmEquipment() {
      this.unbind();
    },
    async unbind() {
      let res = await unbind(this.currentEquipment.imei);
      if (res.code == 0) {
        this.getList();
        this.popupShowEquipment = false;
        uni.showToast({
          title: "解绑成功！",
          icon: "none",
        });
      }
    },
    confirmPopupShow() {
      this.modifyDeviceName();
    },
    btnEvent(e) {
      this.currentEquipment = { ...this.List[e.name] };
      if (e.index == 0) {
        this.popupShow = true;
      } else if (e.index == 1) {
        this.popupShowEquipment = true;
      }
    },
    async modifyDeviceName() {
      let account = this.$userInfo.account;
      if (account) {
        let res = await modifyDeviceName({
          account: this.$userInfo.account,
          deviceName: this.currentEquipment.name,
          imei: this.currentEquipment.imei,
        });
        if (res.code == 0) {
          uni.showToast({
            title: "修改成功！",
            icon: "none",
          });
          this.getList();
          this.popupShow = false;
        }
      }
    },
    scancode() {
      this.imei = "";
      this.secret = "";
      uni.scanCode({
        success: async (res) => {
          try {
            let Data = JSON.parse(res.result);
            this.show = true;
            this.imei = Data?.imei;
            this.secret = Data?.secret;
          } catch (e) {
            uni.showToast({
              title: "二维码识别失败，请检查是否设备二维码？",
              icon: "none",
            });
          }
        },
      });
    },
    async getList() {
      let account = this.$userInfo.account;
      if (account) {
        uni.showLoading({
          title: "加载中",
        });
        try {
          let res = await getList(account);
          this.List = res?.list || [];
          uni.hideLoading();
        } catch (error) {
          uni.hideLoading();
        }
      } else {
      }
    },
    toLink(item, i) {
      let val = this.List[i];
      uni.navigateTo({
        url: `/pages/modules/flow/operation?imei=${val.imei}&lineType=${val.lineType}`,
      });
    },
  },
};
</script>

<style lang="scss">
.DiviceList {
  margin-top: 20rpx;

  .item {
    background-color: white;
    border-radius: 16rpx;
    height: 210rpx;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding: 40rpx 60rpx;
    box-sizing: border-box;

    .left {
      width: 120rpx;
    }

    .right {
      flex: 1;

      .name {
        display: flex;
        justify-content: space-between;

        .name_title {
          font-weight: 600;
        }
      }
    }

    .statusOnline {
      font-size: 30rpx;
      color: #09bb07;
      margin-left: 20rpx;
    }

    .statusOffline {
      font-size: 30rpx;
      color: #b1b1b1;
      margin-left: 20rpx;
    }

    .icon {
      width: 90rpx;
      height: 130rpx;
      margin-right: 40rpx;
    }

    .IMEI {
      font-size: 20rpx;
      color: #999999;
      margin-top: 14rpx;
    }

    .appendEquipment {
      width: 100%;
      text-align: center;
      padding-top: 30rpx;

      img {
        display: inline-block;
        width: 50rpx;
        height: 50rpx;
        margin-right: 20rpx;
      }

      .text {
        vertical-align: super;
      }
    }
  }

  .battery {
    margin-top: 14rpx;
    width: 74rpx;
    height: 40rpx;
    transform: scale(0.6);
    margin-left: -16rpx;
  }
}

.modalBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  > .title {
    font-weight: 600;
    text-align: center;
  }

  > div {
    width: 100%;
    word-wrap: break-word;
    margin-top: 10rpx;
  }
}

.itemBox {
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.popupContent {
  margin-top: 50rpx !important;
}

.changeName {
  display: inline-block;
  vertical-align: top;
  margin-left: 20rpx;
  border: 1px solid #e5e5e5;
  padding: 6rpx 10rpx;
  margin-top: -4rpx;
  border-radius: 4rpx;
}
</style>
